window.addEventListener('load', function () {
    var fo = document.querySelector('.focus');
    var arrowL = document.querySelector('.arrow-l');
    var arrowR = document.querySelector('.arrow-r');
    fo.addEventListener('mouseenter', function () {
        arrowL.style.display = 'block';
        arrowR.style.display = 'block';
        // 清除定时器，停止轮播图
        clearInterval(timer);
        timer = null;
    })
    fo.addEventListener('mouseleave', function () {
        arrowL.style.display = 'none';
        arrowR.style.display = 'none';
        timer = setInterval(function () {
            // 手动调用点击箭头事件
            arrowR.click();
        }, 1500);
    })
    // 动态生成轮播图小圆圈
    var imgul = fo.querySelector('ul');
    var imgli = imgul.children;
    var ol = fo.querySelector('ol');
    function clearOlLi() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
    }
    for (var i = 0; i < imgli.length; i++) {
        var olli = document.createElement('li');
        olli.index = i;
        olli.addEventListener('click', function () {
            clearOlLi();
            this.className = 'current';
            // 点击小圆圈换图片，轮播,ul做动画移动
            animate(imgul, -721 * (this.index));
            // 修复点击小圆点后的bug
            num = circle = this.index;
        })
        ol.appendChild(olli);
    }
    ol.children[0].className = 'current';
    // 克隆第一张图片放在ul最后面
    var first = imgli[0].cloneNode(true);
    imgul.appendChild(first);
    // 点击左右箭头切换
    var num = 0;
    var circle = 0;
    arrowR.addEventListener('click', function () {
        if (num == imgli.length - 1) {
            imgul.style.left = 0;
            num = 0;
        }
        num++;
        animate(imgul, -721 * num);
        circle++;
        // 此时轮到了克隆的图片了
        circle = circle == ol.children.length ? 0 : circle;
        clearOlLi();
        ol.children[circle].className = 'current';
    })
    arrowL.addEventListener('click', function () {
        if (num == 0) {
            num = imgli.length - 1;
            imgul.style.left = -num * 721 + 'px';
        }
        num--;
        animate(imgul, -721 * num);
        circle--;
        // 此时轮到了克隆的图片了
        circle = circle < 0 ? ol.children.length - 1 : circle;
        clearOlLi();
        ol.children[circle].className = 'current';
    })
    // 轮播图自动播放功能
    var timer = setInterval(function () {
        // 手动调用点击箭头事件
        arrowR.click();
    }, 1500);
    // 右侧导航栏
    var quick = document.querySelector('.quick');
    document.addEventListener('scroll', function () {
        quick.style.display = window.pageYOffset >= 820 ? 'block' : 'none';
    })
})
